<template>
  <div>
    <!-- 顶部搜索栏 -->
    <div>
      <van-search
          v-model="searchValue"
          show-action
          background="#21b97a"
          placeholder="请输入小区或地址"
          input-align
          @search="onSearch"
        >
        <!-- label -->
        <template #label>
          <router-link to="/city" class="city">上海</router-link>
          <span><van-icon name="arrow-down" /></span>
          <b>|</b>
        </template>
        <!-- 左箭头 -->
        <template #left>
          <van-icon name="arrow-left" />
        </template>
        <!-- 右地图 -->
        <template #action>
          <van-icon name="location-o" size="20px"/>
        </template>
      </van-search>
    </div>
    <!-- tab标签页 -->
    <van-dropdown-menu>
      <van-dropdown-item  title="区域" >
        <van-picker :columns="columns" />
        <van-row>
            <van-col span="8">
              <van-button type="default" size="large">取消</van-button>
            </van-col>
            <van-col span="16">
              <van-button type="primary" size="large">确定</van-button>
            </van-col>
        </van-row>
      </van-dropdown-item>
      <van-dropdown-item  title="方式">
        <van-picker :columns="columns2" />
        <van-row>
            <van-col span="8">
              <van-button type="default" size="large">取消</van-button>
            </van-col>
            <van-col span="16">
              <van-button type="primary" size="large">确定</van-button>
            </van-col>
        </van-row>
      </van-dropdown-item>
      <van-dropdown-item  title="租金">
        <van-picker :columns="columns3" />
        <van-row>
            <van-col span="8">
              <van-button type="default" size="large">取消</van-button>
            </van-col>
            <van-col span="16">
              <van-button type="primary" size="large">确定</van-button>
            </van-col>
        </van-row>
      </van-dropdown-item>
      <van-dropdown-item  title="筛选">
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 找房内容区 -->
    <div class="tab">
      <houseList />
    </div>
  </div>
</template>

<script>
import houseList from '@/views/Find/houseList.vue'
export default {
  data () {
    return {
      active: 2,
      searchValue: '',
      columns: [
        {
          text: '区域',
          children: [
            {
              text: '不限',
              children: [{ text: '' }]
            },
            {
              text: '杨浦',
              children: [{ text: '不限' }, { text: '鞍山' }, { text: '东外滩' }]
            },
            {
              text: '徐汇',
              children: [{ text: '不限' }, { text: '徐家汇' }, { text: '斜土路' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '不限',
              children: [{ text: '' }]
            },
            {
              text: '一号线',
              children: [{ text: '不限' }, { text: '徐家汇' }, { text: '汉中路' }, { text: '莘庄' }]
            },
            {
              text: '九号线',
              children: [{ text: '不限' }, { text: '徐家汇' }, { text: '嘉善路' }, { text: '打浦桥' }]
            }
          ]
        }
      ],
      columns2: ['不限', '整租', '合租'],
      columns3: [
        '不限',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '6000-7000',
        '7000以上'
      ]
    }
  },
  components: { houseList },
  methods: {
    onSearch () {
      console.log(123)
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .tab {
    padding-top: 46px;
  }
/deep/ .van-icon {
  margin-right: 10px;
  color:#fff;
  font-size: 20px;
}
/deep/ .van-icon-search{
  color: #ccc;
}
/deep/ .van-icon-arrow-down {
  color: #000;
}
/deep/ button {
  background-color: #fff;
  border: none;
}
/deep/ b{
  font-size: 20px;
}
/deep/ .city {
  color: #000;
}

</style>
